<!-- 靠右地图工具栏 -->
<template>
  <div id="menu-tool-right" >
    <div class="button-group-panel">
      <Button type="primary" :Title="$t('map_centre')"  icon="md-locate" style="margin-top: 2px" @click="gotoCenterClick"></Button>
      <Poptip trigger="hover" placement="left" width="200" transfer="transfer">
        <Button type="primary" :Title="$t('map_vendor')" icon="md-globe" style="margin-top: 2px" @click="menuClick(1)"/>
        <div class="poptip-div-1" slot="content">
          <MapChange @mapMenuclick = "mapMenuclick"  ref="mapChange" />
        </div>
      </Poptip>
      <Poptip trigger="hover" placement="left" width="250" transfer="transfer">
        <Button type="primary" :Title="$t('map_tools')" icon="md-crop" style="margin-top: 2px" @click="menuClick(2)"></Button>
        <div class="poptip-div-1" slot="content">
          <MapGeomTools @map-geom-tool-click="mapGeomToolClick" />
        </div>
      </Poptip>
      <Button type="primary" :Title="fullScrTitle" icon="ios-expand" style="margin-top: 2px" @click="changeFullscreen"></Button>
    </div>

  </div>
</template>
<script>
import MapToolsData from "@/view/Home/map/maptools/data/MapToolsData";
import MapChange from "@/view/Home/map/site/MapChange";
import MapGeomTools from "@/view/Home/map/site/MapGeomTools";
//import ZhTW from "@/locale/lang/zh-TW";
import MapInfo from "@/view/Home/map/maptools/data/MapInfo";

export default {
  name:"MenuToolRight",
  components:{MapChange,MapGeomTools},
  props:{
    fullScrTitle:{
      type:String,
      default:'full screen'
    }
  },

  data(){
    return{
      transfer:true,
      customMap: this.$t('map_vendor'),
      mapToolsData: new MapToolsData(),
      mapData:{
        subMenu:null,
        mainMenu:null,
        toolsMenu:null,
      },
/*      geoms:[
        {name:"line",title:"直线",divided:false},
        {name:"polygon",title:"多边形",divided:false},
        {name:"circle",title:"园形",divided:false},
        {name:"distance",title:"测距",divided:true},
        {name:"zoomin",title:"放大",divided:true},
        {name:"zoomout",title:"缩小",divided:false},
      ]*/
    }
  },
  methods:{
    mapMenuclick(menuData){
      //const menuData = this.changeMenu(menuName);
      if (!!menuData){
        this.$emit('mapMenuclick', menuData)
      }
    },
    menuClick(index){
      //console.log(">>>>>>> MenuToolRight.MenuClick: index=%o",index);
    },
    changeMapClick(){

    },
    /**
     *  中心点
     */
    gotoCenterClick(){
      this.$emit('centerClick', null);
    },
    /**
     * 全屏
     */
    changeFullscreen(){
      //console.log(">>>>>>> MenuToolRight.changeFullscreen");
      this.$emit('fullscreenclick', null)
    },
    /**
     * 点击地图工具菜单
     */
    mapGeomToolClick(menuName){
      //console.log(">>>>>>> MenuToolRight.mapGeomToolClick: menuName=%o",menuName);
      this.$emit('map-geom-tool-click', menuName);
    },
    /**
     *反向选择设备菜单
     */
    changeMenu(menuName,subMenuName){
      let subData=null;
      this.mapData.subMenu=[];
      let items = this.mapData.mainMenu;
      for(let i in items){
        items[i].selected=false;
        if (items[i].name == menuName){
          if (!!items[i].sub){
            for(let j in items[i].sub){
              this.mapData.subMenu.push(items[i].sub[j]);
              if (!!!subMenuName && j==0){
                subMenuName = items[i].sub[j].name;
              }
            }
          }else{
            subData={name: items[i].name,map:items[i]};
            if (!!items[i].url){subData.url=items[i].url;}
          }
          items[i].selected = true;
          this.customMap=items[i].desc;
          this.current = items[i];
        }
      }
      if (!!subMenuName){
        return this.$refs.mapChange.menuClick(subMenuName);
      }else if (!!subData){
        //如百度地图
        subData.mapName=this.customMap;
        subData.mapType="";
        new MapInfo().set(menuName);
        return subData;

      }
    },

  },
  mounted() {
    //动态 生成菜单项
    this.mapData.mainMenu = this.mapToolsData.getMapSource();
    this.mapData.toolsMenu = this.mapToolsData.getDrawTools();


  }
}

</script>
<style lang="less">
#menu-tool-right{
  width:100%;
  height:100%;

}
.button-group-panel {
  width:35px;
  height: 100%;
  ///background: #fcfdff;
  background: rgba(255,255,255,0);
  //float: right;
  -webkit-transition: width .3s;
  transition: width .3s;
  //border: 1px solid #14edc5;
  border-top-left-radius: 7px;
  display: flex;
  flex-direction: column;
}

.poptip-div-1{
  background-color: #fcfdff;
  margin-left: 0px;
  display: block;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  .btn{
    margin-left: 5px;
  }
}
</style>

<style lang="less">

/*.ivu-poptip-inner{
  background-color:#001529 !important;
}*/

</style>
